<template>
  <div class="login-container">
    <div class="center">
      <div class="title">
        <img src="../../assets/common/login-logo.png" alt="" />
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" prefix-icon="el-icon-date"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-date"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {loginApi} from '@/api/user'
export default {
  name: 'login',
  data () {
    return {
      form: {
        mobile: '13800000002',
        password: '123456'
      },
      rules:{
        mobile:[
          {required:true,message:'不能为空',trigger:'blur'},
          {
            validator:(rule,value,callback)=>{
              const reg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value)?callback():callback(new Error('手机号不合法'))
            },trigger:'blur'
          }
        ],
        password:[
          {required:true,message:'不能为空',trigger:'blur'},
          //  
        ]
      }
    
    }
  },
  methods:{
    onSubmit(){
      this.$refs.form.validate(async result=>{
        if(result){
          console.log(this.form);
          let res=await loginApi(this.form)
          console.log(res);
        }else{
          console.log('验证不通过');
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  background: url(~@/assets/common/login.jpg) no-repeat center;
  overflow: hidden;
  .center {
    width: 520px;
    height: 400px;
    margin: 150px auto;
    padding: 0 40px;
    .title {
      text-align: center;
      padding: 30px 0;
    }
    ::v-deep input.el-input__inner {
      height: 46px;
      background-color: #d4e5ff;
    }
    button.el-button.el-button--primary {
      height: 50px;
      background: #407ffe;
    }
  }
}
</style>
